<!-- 年级选择 -->
<template>
    <div class="mask">
        <div class="mask-close" @click="gradeClose()"></div>
        <transition name='slideup'>
            <div class="grade-box" v-show="gradeMaskShow">
                <div class="grade-close" @click="gradeClose()"></div>
                <ul>
                    <li :class="['left',{'ischose':gradeChose==index}]" v-for="(item,index) in gradeList" :key="index">
                        <span  @click="gradeChoseFun(item,index)">{{item}}年级</span>
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</template>
<script>
// import { axGet } from '@/api/index'

export default {
    name: 'grade',
    props:[
        "gradeMaskShow",
    ],
    data () {
        return {
            gradeChose:0,
            gradeList:['全','一','二','三','四','五','六'],
        
        }
    },
    watch:{
        gradeMaskShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
    },
    created:function() {
            
    },
    mounted:function(){

    },
    methods:{
        gradeClose(){
            this.$emit('gradeClose')
        },
        // 年级选择
        gradeChoseFun(item,index){
            if(this.gradeChose!=index){
                this.gradeChose=index;
                this.$emit('gradeChoseFun',item,index)
            }
        },
    }
}
</script>
<style type="text/css" scoped>
    .grade-box{
        background: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 1.08rem 0 0.4rem 0.38rem;
        border-radius: 0.42rem 0.42rem 0 0;
        font-size: 0.3rem;
    }
    .grade-close{
        width: 0.5rem;
        height: 0.5rem;
        background: url(~@/assets/img/icon/close.png) no-repeat 0 0;
        background-size: 100%;
        position: absolute;
        top: 0.32rem;
        right: 0.32rem;
    }
    .grade-box li{
        padding: 0 0.09rem 0.3rem;
    }
    .grade-box li span{
        display: block;
        width: 2.06rem;
        height: 0.8rem;
        line-height: 0.8rem;
        background: #eff1f3;
        text-align: center;
        border-radius: 0.44rem;
        color: #666;
    }
    .grade-box li.ischose span{
        color: #fff;
        background: #02affe;
    }
</style>